<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/icon.css">

<!-- <script src="<?= base_url() ?>file/js/jquery-ui-1.8.18.custom/jquery-ui-1.8.21.custom.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.18.custom/jquery-1.7.1.min.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.18.custom/jquery.ui.core.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.18.custom/jquery.ui.widget.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.18.custom/jquery.ui.position.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.18.custom/jquery.ui.autocomplete.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.datepicker.js"></script> -->

<style>
	.ui-autocomplete {
		max-height: 100px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding to account for vertical scrollbar */
		padding-right: 20px;
	}
	
	</style>

<form id="form" action="<?=base_url() ?>index.php/returns/saveSwap" method="post">
	<div class="panel-wrap" style="height: auto">
		<div class="panel-header-div">Cluster Information</div>
		<div class="panel-body-div">
		
			<div class="left-panel-body">
				<?php foreach($cluster as $item):?>
					<h2><?php echo $item->territory_name?></h2>
					
				<?php endforeach?>
			</div>
			<div class="right-panel-body">
				<table class="table-right-panel" width="100%" border="solid black 1px">
					<tr align="center" class="tr-colour">
						<th width="50%" align="center">Date</th>
						<th align="center">Return No</th>
					</tr>
					
					
					<tr align="center" class="gray">
						<td class="readonly" width="50%" align="center">
							<?php 
								$tanggal = explode(' ',$returns->created_on);
							?>
							<input type="text" name="return_date"  id="date" readonly="true" value="<?=$tanggal[0]?>"/>	
						</td>
						
						<td class="readonly" width="50%" align="center">
							<input type="text" name="return_no"  id="return_no" readonly="true" value="<?php echo $returns->return_id?>"/>
						</td>
						
					</tr>
				</table>
			</div>
			
		</div>
	</div>


	<div class="panel-wrap" style="height: auto">
		<div class="panel-header-div">Return Information</div>
		
		<div class="panel-body-div">
			<div class="child-panel-body">
				<div class="left-panel-body">
				
					<table class="table-right-panel" width="60%" border="solid black 1px">
						<tr align="center" class="tr-colour2">
							<th width="60%" align="center">Sales Name</th>
							<th width="40%" align="center">Sales ID</th>
						</tr>
						
						
						<tr align="center" class="gray">
							<td>
								<?=$returns->user_name?>
							</td>
							<td class="readonly" align="center">
								<?=$returns->user_id?>
							</td>
							
							
						</tr>
					</table>
				</div>
			</div>
			<div class="child-panel-body">
				<div class="left-panel-body">
				
					<table class="table-right-panel" width="60%" border="solid black 1px">
						<tr align="center" class="tr-colour2">
							<th width="60%" align="center">Outlet Name</th>
							<th width="40%" align="center">Outlet ID</th>
						</tr>
						
						
						<tr align="center" class="gray">
							<td> <?=$returns->f_get_channel_name?> </td>
							<td class="readonly" align="center"> <?=$returns->channel_id?> </td>
						</tr>
					</table>
				</div>
			
			</div>
			<br><br>
					
			<div class="child-panel-body">
					<h2>Return Products</h2>
					<table class="item-list" id="table-return">
						<thead>
						<tr align="center" class="tr-colour3" id="tr_select_all">
							<th>No</th>
							<th width="30%">ICCID</th>
							<th width="15%">Buying Date</th>
							<th width="40%">Description</th>
							<th width="10%">Price (Rp.)</th>
							<th width="5%">Valid</th>
						</tr></thead>
						<?php $x=1;
							foreach ($items as $item) : 
							$tgl = explode(" ", $item->created_on);
							$harga = $item->price - ($item->price * ($item->discount/100));
						?>

							<tr>
								<td><?=$x++;?></td>
								<td><?=$item->iccid;?></td>
								<td><?=$tgl[0];?></td>
								<td><?=$item->item_name;?></td>
								<td align="right">Rp. <?=number_format($harga, 2, '.', ',');?></td>
								<td><?php if ($item->istatus == 1) {echo "Valid";} else {echo "Not Valid";} ?></td>
							</tr>
						
						<?php endforeach; ?>
					</table>
			</div>

			<div class="child-panel-body-2">
				<h2>Swap Products</h2>
				<button id="button-swap-add">Add Swap Item</button>
				<button id="button-swap-remove">Remove Swap Item</button>
			</div>
	
			<div class="child-panel-body">
				
				<table class="table-right-panel item-list" id="table-updateable" width="97%" style="margin-left: 19px; margin-right: 20px;">
					<thead>
						<tr align="center" class="tr-colour3" id="tr_select_all">
							<th><input type="checkbox" id="tickall" onclick="tickAll();"/></th>
							<th width="20%">ICCID</th>
							<th width="20%">Item Code</th>
							<th width="40%">Item Name</th>
							<th width="20%">Item Group</th>							
						</tr>
					</thead>
					<tbody class="swap-item">

					</tbody>
				</table>
			</div>

			<div class="child-panel-body-2">
				<table class="table-right-panel" width="97%" style="margin-left: 19px;  margin-right: 20px; border: none; ">
					<tr style="height: 15px;">
						<td style="text-align: left; font-weight: bold; font-size: 1.3em;">Remark:</td>
						<td width="94%" >
							<textarea id="remark" rows="6" cols="132" readonly="true"><?=$returns->remark?></textarea>
						</td>
					</tr>
				</table>
			</div>
		
			<div class="child-panel-body-2">
				<div class="buttons-2" style="margin: 0 auto">
					<input type="submit" value="Submit"/>
				</div>
			</div>
		</div>
	</div>
</form>

<script type="text/javascript">
$(document).ready(function(){
	var x = 1;

	$('button#button-swap-remove').hide();

	$("#button-swap-add").button().click(function(event){
		event.preventDefault();
		var new_item = '<tr id="item_'+x+'">'+
					'<td class="itemSwap"><input type="checkbox" id="tick_'+x+'" onChange="tickedItem('+x+')" /></td>'+
					'<td><input type="text" id="iccid_'+x+'" name="iccid[]" onChange="getIccid('+x+')" onFocus="getIccid('+x+')" /></td>'+
					'<td><input type="text" id="item_code_'+x+'" disabled="disabled" class="readonly" /></td>'+
					'<td><input type="text" id="item_name_'+x+'" disabled="disabled" class="readonly" size="60"/></td>'+
					'<td><input type="text" id="item_group_'+x+'" disabled="disabled" class="readonly" /></td>'+
				'</tr>';
		$('tbody.swap-item').append(new_item); x++; hitungSwap();
	});
	$("#button-swap-remove").button().click(function(){
		event.preventDefault();
		$('#tickall').removeAttr('checked');
		$('input:checked').each(function() {
			$('button#button-swap-remove').hide();
			$('input:checked').parent().parent().remove();
			hitungSwap();
		});
	});
});

function hitungSwap(){
	var jumlahReturn = <?php echo count($items); ?>;
	if (jumlahReturn <= $(".itemSwap").length ) {
		$("#button-swap-add").hide();
	}
	else {
		$("#button-swap-add").show();
	}
}
function tickedItem(x) {
	$('input:checkbox').click(function(){
		var n = $("input:checked").length;
		if (n!=0) { $('button#button-swap-remove').show(); }
		else { $('button#button-swap-remove').hide(); }
	});
}

function tickAll() {
	if($('#tickall').is('input:checked')) {
		// alert('semua di centang');
		$('input[type="checkbox"]').attr('checked','checked');
		$('button#button-swap-remove').show();
	} else {
		$('input[type="checkbox"]').removeAttr('checked');
		$('button#button-swap-remove').hide();
	}
}

function getIccid(iterasi) {
	$("#iccid_"+iterasi).autocomplete({
		source: function(request, response){
			$.post(
				"<?php echo base_url(); ?>index.php/returns/getSwapItemCandidate/"+$("#iccid_"+iterasi).val(), 
				{data:request.term}, 
				function(data){     
					response($.map(data, function(item) {
						return {
							label: item.iccid,
							value: item.iccid
						}
					}))
				}, 
				"json"
			);
		},
		minLength: 2,  //Maximum ICCID lenght is 20
		dataType: "json",
		cache: false,
		focus: function(event, ui) {
			return false;
		},
		select: function(event, ui) {
			this.value = ui.item.label;
			updateValue(this.value, iterasi);
		return false;
		}
	});
}

function updateValue(iccid, iterasi) {
	var flag = false;
	$.ajax({
		url: "<?php echo base_url(); ?>index.php/returns/getSwapItem/"+iccid,
		dataType:"json",
		success:function(data){
			$.each(data, function(i,n){
				$("#iccid_"+iterasi).val(n["iccid"]);
				$("#item_code_"+iterasi).val(n["item_code"]);
				$("#item_name_"+iterasi).val(n["item_name"]);
				$("#item_group_"+iterasi).val(n["item_group_name"]);
				flag = true;
			});	
		},
		error: function(data){	
		}
	});
}

</script>